<template>
  <template v-for="route in authMenuList" :key="route.path">
    <!-- 有子集就使用 el-sub-menu 然后调用自身递归遍历 -->
    <el-sub-menu v-if="route.children" :index="route.path">
      <template #title>
        <span>{{ route.meta?.title }}</span>
      </template>
      <FormMenu :authMenuList="route.children"></FormMenu>
    </el-sub-menu>
    <!-- 没有子集就使用 el-menu-item -->
    <el-menu-item v-else :index="route.path" @click="handleClick(route.path, $event)">
      {{ route.meta?.title }}
    </el-menu-item>
  </template>
</template>

<script setup lang="ts">
import { defineComponent, computed, defineAsyncComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'



// console.log(window.location.href, '路径'); 等待测试

// props
const { authMenuList } = defineProps<{
  authMenuList: RouteRecordRaw[] 
}>();

// 保证菜单不会因为刷新也丢失选中状态 可能存在设计问题 黄色警告无法消除
const route = useRoute()
const activePath = computed(() => route.path)

// 路由跳转
const router = useRouter()
const handleClick = (path: string, event: Event): void => {
  router.push(path)
}

const FormMenu = defineAsyncComponent(() => import('@/components/sidebar/ForMenu.vue'))
defineComponent({
  name: 'FormMenu'
})
</script>